<template>
	<view style="padding:20upx 30upx">
		<u-calendar v-model="timeShow" mode="range" @change="change"></u-calendar>
		<u-picker mode="time" v-model="retimeShow" :params="params" @confirm="retimeConfirm"></u-picker>
		<u-picker mode="time" v-model="acttimeShow" :params="params" @confirm="acttimeConfirm"></u-picker>
		<u-select v-model="regionShow" mode="mutil-column-auto" :list="listAddress" @confirm="confirm"></u-select>
		<u-form :model="form" ref="uForm" label-width="160">
			<u-form-item label="逝者" prop='name'>
				<u-input v-model="form.name" placeholder="请输入追忆人姓名..."/>
			</u-form-item>
			<u-form-item label="与逝者关系" prop='relation'>
				<u-input v-model="form.relation" placeholder="请输入与追忆人关系..." />
			</u-form-item>
			<u-form-item label="电话" prop='pho'>
				<u-input v-model="form.pho" placeholder="请输入本人电话..." />
			</u-form-item>
			<u-form-item label="生平简介" prop='deco'>
				<u-input v-model="form.deco" type="textarea" />
			</u-form-item>
			<u-form-item label="事迹">
				<u-input v-model="form.Deeds[0]" type="text" placeholder="事迹一"/>
				<u-input v-model="form.Deeds[1]" type="text" placeholder="事迹二" />
				<u-input v-model="form.Deeds[2]" type="text" placeholder="事迹三" />
			</u-form-item>
			<u-form-item label="上传视频">
				<button type="default" @tap="chooseVideo">+</button>
			</u-form-item>
			<u-form-item label="上传相册">
				<u-upload width="160" :action="upUrl" height="160" :file-list="fileList"></u-upload>
			</u-form-item>
		</u-form>
		<view class="subBtn">
			<button type="primary" size="mini" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				upUrl: '', //提交地址
				timeShow: false,
				regionShow: false,
				retimeShow: false,
				acttimeShow: false,
				fileList: [{
					url: 'https://lhcdn.lanhuapp.com/web/imgs/meiqia_btn25bb4fe73.png',
				}],
				rules:{
					name:[{
						type:"string",
						require:true,
						message:'请重新填写名称'
					}],
					relation:[{
						type:"string",
						message:'请正确填写与本人的关系'
					}],
					pho:[{
						required: true, 
						message: '请输入手机号',
						trigger: ['change','blur'],
					},{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
				},
				form: {
					name: "",
					intro: '',
					ishas: '1',
					nameof: '',
					time: '',
					address: '',
					retime: "",
					acttime: '',
					relation: '',
					deco: '',
					pho:'',
					Deeds:['','','']
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				listAddress: [{
					label: '青竹镇',
					value: '1',
					children: [{
						label: 'A区',
						value: '11',
						children: [{
							label: '1排',
							value: '111',
							children: [{
								label: '20号',
								value: '1111',
							}]
						}]
					}]
				}]
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
				let a = ''
				this.form.address = e.reduce(function(pre, next, index) {
					if (index == 0) {
						return pre + next.label
					} else {
						return pre + '-' + next.label
					}
				}, a)
			},
			timeConfirm(e) {
				console.log(e)
				this.form.time = e.year + '-' + e.month + '-' + e.day
			},
			acttimeConfirm(e) {
				this.form.acttime = e.year + '-' + e.month + '-' + e.day
				console.log(e)
			},
			retimeConfirm(e) {
				this.form.retime = e.year + '-' + e.month + '-' + e.day
				console.log(e)
			},
			change(e) {
				this.form.time = e.startDate + '~' + e.endDate
				console.log(e)
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			chooseVideo() {
				// 上传视频
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					camera: 3,
					sourceType: ['album'],
					success: (responent) => {
						let videoFile = responent.tempFilePath;
						console.log("视频文件：",videoFile)
						uni.uploadFile({
							url: "http:192.168.3.210",
							method: "POST",
							header: {
								'Authorization': 'bearer ' + uni.getStorageSync('token')
							},
							filePath: videoFile,
							name: 'file',
							success: (res) => {
								// let videoUrls = JSON.parse(res.data) //微信和头条支持
								let videoUrls = res.data //百度支持
								this.imagesUrlPath = this.imagesUrlPath.concat(videoUrls.result
									.filePath);
								this.src = videoUrls.result.filePath; //微信
								if (this.src) {
									this.itemList = ['图片']
								} else {
									this.itemList = ['图片', '视频']
								}

							}
						})
						// this.src = responent.tempFilePath;  //头条
					}
				})
			},
		}
	}
</script>

<style scoped>
	.subBtn {
		text-align: center;
		margin: 50upx auto;
	}

	.indeco {
		color: rgb(127, 77, 18);
	}

	.taca {
		padding: 15upx;
	}
</style>
